<template>
    <Modal :mask-closable="false" v-model="visible" :title="title">

        <el-table ref="table" :data="putMaterialData" style="width: 100%" row-key="id" border
            header-cell-style="tableHeaderColor">
            <el-table-column label="设备名称" prop="equipmentId" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <span>{{ equipmentData.find(i => i.id === scope.row.equipmentId)?.equipmentName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="工装名称" prop="toolId" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.toolId" placeholder="请选择"
                        @change="((e) => { needFind(e, scope.row, 'toolId') })">
                        <el-option v-for="(item, index) in toolData" :key="item.id" :value="item.id" :label="item.code">
                        </el-option>
                    </el-select>


                </template>
            </el-table-column>
            <el-table-column label="工单数量" prop="needNumber" min-width="80" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                    <Input type="number" v-model="scope.row.needNumber"
                        @on-change="((e) => { needFind(e.target.value, scope.row, 'needNumber') })"></Input>
                </template>
            </el-table-column>

        </el-table>

        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit('form')">确定</Button>
        </div>
    </Modal>
</template>

<script>

import {
    queryToolingByWork
} from '@/api/scheduling/dispatchManagement'

export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        materialList: Array,
        putMaterialData: Array,
        equipmentData: Array,
        titleDetail: Array,
    },

    data() {
        return {
            toolData: []
        };
    },
    watch: {
        async visible(newValue, oldValue) {
            if (newValue) {

                queryToolingByWork({ id: this.titleDetail.id }).then(res => {
                    if (res.code === 200) {
                        this.toolData = res.data
                    }
                })


            }
        }
    },
    methods: {
        needFind(e, row, type) {
            console.log(e, 'aaa', row, type, this.putMaterialData)
            const needData = this.putMaterialData.map((item) => {

                if (item.equipmentId === row.equipmentId) {
                    return {
                        ...item,
                        [type]: e
                    }

                }
                return item
            })
            this.putMaterialData = needData
            console.log("needFind", needData)
        },
        closeModal() {
            this.$emit("update:visible", false);
        },
        handleSubmit(formName) {
            this.handleAddSubmit();

        },
    },
};
</script>

<style scoped>
.formList {}
</style>